<script setup lang="ts">
import {onMounted} from 'vue';
import installTitle from './components/install-title.vue';
import {useRouter} from 'vue-router';

const router = useRouter()

// 生命周期
onMounted(() => {
  // setTimeout(() => {
  //   router.push({path: '/installResult'})
  // }, 1500)
})

</script>

<template>
  <div class="top-layout">
    <installTitle model-value="transparent"></installTitle>
    <div class="top-content hor-layout-center">
      <img class="content-image" src="../../assets/img/install-progress-bg.png">
      <ul class="content-text">
        <li>面向终端用户的自助式授权服务平台</li>
        <li>支持各类品牌手机自助授权</li>
        <li>引导式自助服务，方便快捷</li>
        <li>授权、激活一体化</li>
      </ul>
    </div>
  </div>
  <div class="progress-view ver-layout-center">
    <van-progress stroke-width="7px" :percentage="21" style="width: 100%;"/>
    <router-link to="/installResult">
      <div class="progress-text">正在安装...</div>
    </router-link>
  </div>
</template>

<style lang="less">
.top-layout {
  background-color: #4aa3ff;
  padding-bottom: 30px;

  .top-content {
    margin: 30px 10%;

    .content-image {
      width: 304px;
      height: 214px;
    }

    .content-text {
      margin-left: 50px;
      color: white;
      list-style-type: disc;

      li {
        line-height: 30px;
      }
    }
  }
}

.progress-view {
  margin: 10% 10%;

  .progress-text {
    margin-top: 20px;
  }
}
</style>
